{% extends 'template.html' %}

{% block username %}
    {{ request.user.username }}
{% endblock %}

{% block content %}
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">主机统计图表</h1>
                <h3><small>点击图表上方图例，可以选择统计哪些主机状态（默认不选中已归还）</small></h3>
            </div>
        </div>
        <div class="panel-body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#by_project" data-toggle="tab">按项目统计</a>
                </li>
                <li><a href="#by_room" data-toggle="tab">按机房统计</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane fade in active" id="by_project">
                    <br>
                    <div id="host_statistics_by_project_chart" style="height: 800%; width: 100%"></div>
                </div>
                <div class="tab-pane fade" id="by_room">
                    <br>
                    <div id="host_statistics_by_room_chart" style="height: 800%; width: 1600px"></div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}
{% block bodyjs %}
    <script src="/static/js/echarts/echarts.min.js"></script>
    <script src="/static/js/echarts/theme/dark.js"></script>
    <script src="/static/js/host_statistics.js?v=20190625001"></script>
{% endblock %}
{% block css %}

{% endblock %}
